<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSONP</title>
</head>
<body>
    <script>
        function callback(data) {
            console.log(data)
        }
    </script>
    <!-- <script src="http://localhost:8888"></script> -->
    <img src="https://ts1.cn.mm.bing.net/th?id=OIP-C.aWCdp1q98FM7fPzw5miN8gHaNK&w=107&h=170&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2" alt="">
    <script>
        function jsonp(url, data={}, callback='callback', cb) {
            // console.log(url, data, callback)
            let dataStr = url.indexOf('?') === -1 ? '?' : '&';
            for (let key in data) {
                dataStr += `${key}=${data[key]}&`
            }
            // with padding
            dataStr += `callback=${callback}`;
            let scriptSrc = url + dataStr
            // console.log(scriptStr)
            let oScript = document.createElement('script');
            oScript.src = scriptSrc;
            document.body.appendChild(oScript);
            window[callback] = (data) => {
                // 完成跨域请求
                // console.log(data)
                cb(data)
            }
        }
        jsonp('http://localhost:8888/?a=1', {
            page: 1, 
            cate: 'recommend'
        }, 'recommendCallback', (data) => {
            console.log(data, 'to be continue')
        })

        // JSONP
        // 1. script src DOM 动态构建
        // 2. callback  动态指定
        // Ajax  fetch  跨域  同源策略
        // 能发送请求吗 CROS
        // 服务器能接受吗
        // 数据到达后能相信吗

        // fetch('http://localhost:8888/')
        //     .then(data => data.json())
        //     .then(data => {
        //         console.log('---------')
        //     })
    </script>
</body>
</html>